<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <th:block th:include="include :: header('角色列表')"/>
</head>
</head>
<body class="pear-container">
<div class="layui-card">
  <div class="layui-card-body">
    <form class="layui-form" action="">
      <div class="layui-form-item">
        <div class="layui-input-inline">
          <input type="text" name="roleName" placeholder=" 角色名 " class="layui-input">
        </div>
        <div class="layui-input-inline">
          <input type="text" name="roleCode" placeholder=" 角色标识 " class="layui-input">
        </div>
        <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query">
          <i class="layui-icon layui-icon-search"></i>
          查询
        </button>
        <button type="reset" id="reset" class="pear-btn pear-btn-md">
          <i class="layui-icon layui-icon-refresh"></i>
        </button>
      </div>
    </form>
  </div>
</div>
<div class="layui-card">
  <div class="layui-card-body">
    <table id="user-table" lay-filter="user-table"></table>
  </div>
</div>
<script type="text/html" id="head-toolbar">
  <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
    <i class="layui-icon layui-icon-add-1"></i>
    新增
  </button>
</script>

<script type="text/html" id="user-bar">
  <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i>
  </button>
</script>

<script type="text/html" id="role-bar">
  <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>
  </button>
  <button class="pear-btn pear-btn-warming pear-btn-sm" lay-event="power"><i class="layui-icon layui-icon-vercode"></i>
  </button>
  <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i>
  </button>
</script>

<script type="text/html" id="role-enable">
  <input type="checkbox" name="enable" value="{{d.roleId}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="role-enable"
         {{d.enable== '0' ? 'checked' : '' }} >
</script>


<th:block th:include="include :: footer"/>
<script>

  /**
   * 点击展示正常尺寸图片
   * @param t
   */
  function showImg(t) {
    let $ = layui.jquery;

    let x = $(t).find("img");
    layer.open({
      type: 1,
      shadeClose: true,
      title: false,
      closeBtn: 0,
      end: function (index, layero) {
        return false;
      },
      content: '<div style="text-align: center"><img src="' + $(x).attr('src') + '"></div>'
    })
  }

  function showTip() {
    return layer.tips('<a href="/SteelPipe/goods/template" class="down">模板下载</a>', '#test2', {tips: [3, '#f2f2f2']});
  }


  layui.use(['table', 'form', 'jquery', 'drawer', 'dropdown', 'upload', 'popup'], function () {
    let table = layui.table;
    let form = layui.form;
    let $ = layui.jquery;
    let drawer = layui.drawer;
    let dropdown = layui.dropdown;
    let upload = layui.upload;
    let popup = layui.popup;


    // 导入
    let uploadInst = upload.render({
      elem: '#test1',
      url: suffix + '/common/upload',
      size: 5120,
      before: function () {
        layer.load(0, {shade: 0.3})
      },
      done: function (res) {
        layer.close(layer.load(0, {shade: 0.3}));
        if (res.code == 0) {
          popup.success(res.msg, function () {
            table.reload("user-table");
          });
        } else {
          popup.failure(res.msg);
        }
      },
      error: function (index, upload) {
        layer.close(layer.load(0, {shade: 0.3}));
        popup.failure("上传出错");
      }
    })

    let cols = [
      [
        // {type: 'checkbox'},
        {title: '角色名', field: 'roleName', align: 'center'},
        {title: '角色标识', field: 'roleCode', align: 'center'},
        {title: '描述', field: 'details', align: 'center'},
        {title: '是否可用', field: 'enable', align: 'center', templet: '#role-enable'},
        {title: '排序', field: 'sort', align: 'center'},
        {title: '操作', toolbar: '#role-bar', align: 'center', width: 195}
      ]
    ]

    table.render({
      elem: '#user-table',
      url: suffix + '/role/list',
      page: true,
      cols: cols,
      skin: 'line',
      toolbar: '#head-toolbar',
      defaultToolbar: ['', '', '']
    });

    table.on('tool(user-table)', function (obj) {
      if (obj.event === 'remove') {
        window.remove(obj);
      } else if (obj.event === 'edit') {
        window.edit(obj);
      } else if (obj.event === 'power') {
        window.power(obj);
      }
    });

    table.on('toolbar(user-table)', function (obj) {
      if (obj.event === 'add') {
        window.add();
      } else if (obj.event === 'refresh') {
        window.refresh();
      } else if (obj.event === 'batchRemove') {
        window.batchRemove(obj);
      } else if (obj.event === 'importExcel') {
        window.importExcel();
      }
    });

    form.on('submit(user-query)', function (data) {
      table.reload('user-table', {
        where: {
          roleName: data.field.roleName,
          roleCode: data.field.roleCode
        }
      })
      return false;
    });
    form.on('switch(role-enable)', function (obj) {
      let operate;
      if (obj.elem.checked) {
        operate = "enable";
      } else {
        operate = "disable";
      }
      let loading = layer.load()
      $.ajax({
        url: '/role/' + operate,
        data: {roleId: this.value},
        dataType: 'json',
        type: 'post',
        success: function (result) {
          layer.close(loading);
          $(".layui-laypage-btn").trigger("click");
          if (result.success) {
            layer.msg(result.msg, {icon: 1, time: 1000});
          } else {
            layer.msg(result.msg, {icon: 2, time: 1000});
          }
        }
      })
    });
    window.add = function () {
      layer.open({
        type: 2,
        title: '新增',
        shade: 0.1,
        area: ['500px', '500px'],
        content: suffix + '/role/add'
      });
    }

    window.power = function (obj) {
      layer.open({
        type: 2,
        title: '授权',
        shade: 0.1,
        area: ['320px', '400px'],
        content: suffix + '/role/power?roleId=' + obj.data["roleId"]
      });
    }

    window.edit = function (obj) {
      layer.open({
        type: 2,
        title: '修改',
        shade: 0.1,
        area: ['500px', '500px'],
        content: suffix + '/role/edit?roleId=' + obj.data['roleId']
      });
    }

    window.remove = function (obj) {
      layer.confirm('确定要删除该角色', {icon: 3, title: '提示'}, function (index) {
        layer.close(index);
        let loading = layer.load();
        $.ajax({
          url: "/role/deleteOne",
          dataType: 'json',
          data: {roleId: obj.data['roleId']},
          type: 'post',
          success: function (result) {
            layer.close(loading);
            if (result.code == 0) {
              layer.msg(result.msg, {icon: 1, time: 1000}, function () {
                obj.del();
              });
            } else {
              layer.msg(result.msg, {icon: 2, time: 1000});
            }
          }
        })
      });
    }

    window.batchRemove = function (obj) {
      let data = table.checkStatus(obj.config.id).data;
      if (data.length === 0) {
        layer.msg("未选中数据", {
          icon: 3,
          time: 1000
        });
        return false;
      }
      let ids = "";
      for (let i = 0; i < data.length; i++) {
        ids += data[i].goodId + ",";
      }
      ids = ids.substr(0, ids.length - 1);
      layer.confirm('确定删除', {
        icon: 3,
        title: '提示'
      }, function (index) {
        let loading = layer.load();
        $.ajax({
          url: suffix + "/goods/deletes",
          dataType: 'json',
          data: {ids: ids},
          type: 'post',
          success: function (result) {
            layer.close(loading);
            if (result.success) {
              layer.msg(result.msg, {
                icon: 1,
                time: 1000
              }, function () {
                table.reload('user-table');
              });
            } else {
              layer.msg(result.msg, {
                icon: 2,
                time: 1000
              });
            }
          }
        })
      });
    }

    window.refresh = function (param) {
      table.reload('user-table');
    }

    $("#reset").click(function () {
      $("input[name='cond']").val('');
      table.reload('user-table', {
        where: {
          cond: ''
        }
      })
    });


  })
</script>
</body>
</html>

